<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新人员</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-remove" size="mini" @click="confirmDel">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="name">
                  <div>账号</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="real_name">
                  <div>人员名称</div>
                  <el-input v-model="data.real_name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="phone">
                  <div>电话</div>
                  <el-input v-model="data.phone" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="phone2">
                  <div>备用电话</div>
                  <el-input v-model="data.phone2" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="email">
                  <div>电子邮件</div>
                  <el-input v-model="data.email" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select v-model="data.status" placeholder="请选择" size="mini">
                    <el-option v-for="(item, index) in theStatus" :key="index" :label="item" :value="index" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="department_id">
                  <div>部门</div>
                  <v-select v-model="data.department_id" action="departmentList" :query="{category: 1}" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="section_id">
                  <div>科室</div>
                  <v-select v-model="data.section_id" :disabled="!data.department_id" :query="{parent_id: data.department_id, category: 2}" action="departmentList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="class_id">
                  <div>班组</div>
                  <v-select v-model="data.class_id" :disabled="!data.section_id" :query="{parent_id:data.section_id, category: 3}" action="departmentList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="job_id">
                  <div>岗位</div>
                  <v-select v-model="data.job_id" :disabled="!data.class_id" :query="{parent_id:data.class_id, category: 4}" action="departmentList" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="job_id">
                  <div>工程师</div>
                  <v-select v-model="data.gcs_id" :disabled="!data.job_id" :query="{parent_id:data.job_id, category: 5}" action="departmentList" />
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="4" :md="5" :sm="6">
                <el-form-item prop="type">
                  <div>账号类型</div>
                  <el-select v-model="data.type" placeholder="请选择" size="mini">
                    <el-option v-for="(item, index) in staffType" :key="index" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="4" :lg="4" :md="5" :sm="6">
                <el-form-item prop="profession">
                  <div>专业</div>
                  <el-select v-model="data.profession" placeholder="请选择" size="mini">
                    <el-option v-for="(item, index) in staffProfession" :key="index" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="4" :md="5" :sm="6">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane lazy label="企业微信">
              <el-table :data="wxList">
                <el-table-column label="姓名" min-width="45%" prop="admin.name">
                  <template slot-scope="{row}">
                    <span v-if="row.name">{{ row.name }}</span>
                    <span v-else>未填写</span>
                  </template>
                </el-table-column>
                <el-table-column label="电话" min-width="45%" prop="admin.phone">
                  <template slot-scope="{row}">
                    <span v-if="row.mobile">{{ row.mobile }}</span>
                    <span v-else>未填写</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="10%">
                  <template slot-scope="{row}">
                    <el-button type="text" size="small" @click="getwx(row.id)">同步</el-button>
                    <el-button type="text" size="small" @click="wxDel(row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :xl="4" :lg="4" :md="5" :sm="6">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.create_admin" placeholder="创建人" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" size="mini" :disabled="true" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.update_admin" placeholder="更新者" class="mtb10" size="mini" :disabled="true" />
                    </div>
                  </div>
                </el-col>
                <el-col :xl="20" :lg="20" :md="19" :sm="18">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/personnel/staff'
import Tinymce from '@/components/Tinymce/index'
import { theStatus, staffType, staffProfession } from '@/utils/options'
import VSelect from '@/components/select'
export default {
  inject: ['backUrl', 'delOne', 'update', 'goUrl'],
  components: {
    Tinymce,
    VSelect
  },
  data() {
    return {
      data: {
        'admin': {
          'phone': ''
        },
        'cr_admin': {
          'name': ''
        }
      },
      wxList: [],
      theStatus,
      staffType,
      staffProfession,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }
        ],
        real_name: [
          {
            required: true,
            message: '请输入人员名称',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }
        ],
        phone2: [
          {
            required: true,
            message: '请输入备用电话',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入电子邮件',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        department_id: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ],
        section_id: [
          {
            required: true,
            message: '请选择科室',
            trigger: 'change'
          }
        ],
        class_id: [
          {
            required: true,
            message: '请选择班组',
            trigger: 'change'
          }
        ],
        job_id: [
          {
            required: true,
            message: '请选择岗位',
            trigger: 'change'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择权限',
            trigger: 'change'
          }
        ],
        profession: [
          {
            required: true,
            message: '请选择专业',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {},
  created() {
    this.index()
  },
  methods: {
    index() {
      const id = this.$route.params.id
      API.getOne(id).then(response => {
        if (response.error_code === 71404) {
          this.$alert('您请求的人员不存在', '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.backUrl()
            }
          })
        }
        this.data = response.data
        this.wxList = response.data.wx
      })
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    goBack() {
      this.goUrl('/personnel/staff')
    },
    wxDel(id) {
      API.wxDel(id).then(res => {
        if (res.data.error_code === 1) {
          this.index()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getwx(id) {
      API.getWx(id).then(res => {
        if (res.data.error_code === 1) {
          this.index()
          this.$message({
            message: '同步成功',
            type: 'success'
          })
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>
